<script setup lang="ts">
defineOptions({
  name: "MACHINE_CONSUMABLEITEMSLIFECYCLE_FILTER_BAG_MAU"
});

import { ref, nextTick, onMounted } from "vue";
import consumableItems from "../components/consumableItems.vue";
import detailInfo from "../components/detailInfo.vue";
import detailListInfo from "../components/detailListInfo.vue";
import historyView from "../components/checkHistory.vue";
import tableList from "../components/tableList.vue";
import { queryConsumableDetailList, queryEquipmentConsumableQuantity } from "@/api/modules/machine";
import { useRouterStoreHook } from "@/store/modules/router";
import dayjs from "dayjs";
import isToday from "dayjs/plugin/isToday";

dayjs.extend(isToday);

const routeStore = useRouterStoreHook();
// const detailInfoRef = ref<InstanceType<typeof detailInfo> | null>(null);
const detailListInfoRef = ref<InstanceType<typeof detailInfo> | null>(null);
const detailInfoLoading = ref<boolean>(false);
const detailListInfoLoading = ref<boolean>(false);
const typeId_ = ref<string>("");
const isShowHistory = ref(false);
const tabItemRef = ref<any>(null);
const storageData = ref<any>({});

const typeIdChangeHandler = async (typeId: string) => {
  typeId_.value = typeId;
  detailInfoLoading.value = true;
  detailListInfoLoading.value = true;
  const className = routeStore.getSubject;
  const params = { typeId, className, devType: "MAU" };
  let res: any = await queryConsumableDetailList(params, () => {
    detailInfoLoading.value = false;
    detailListInfoLoading.value = false;
  });
  // detailInfoRef.value.initData(res.ffuList);
  detailInfoLoading.value = false;
  detailListInfoRef.value.initData(res.ffuList);
  detailListInfoLoading.value = false;
};

// 查询设备数据
const fetchData = async (devType: any) => {
  const className = routeStore.getSubject;
  // 公司 写死 593
  const typeId_ = "593";
  // 厂内 写死 584
  // const typeId_ = "584";
  const queryDateStart = "";
  const queryDateEnd = "";
  const params = { className, devType: devType, typeId: typeId_, queryDateStart, queryDateEnd };
  const res = await queryEquipmentConsumableQuantity(params, () => {
    // loading.value = false;
  });
  // tabItemRef.value.initData(res, devType);
  return { data: res };
};

// 查询设备table list 数据
const fetchList = async (typeId?: any) => {
  typeId_.value = typeId;
  detailInfoLoading.value = true;
  const className = routeStore.getSubject;
  // const params = { typeId, className, devType: current.type, type: current.name };
  const params = { typeId, className, devType: "MAU" };
  let res: any = await queryConsumableDetailList(params, () => {
    detailInfoLoading.value = false;
  });
  // const filterDatas = res.ffuList.filter(item => item.ffuName == current.typeName);
  // detailInfoRef.value.initData(res.ffuList);
  detailInfoLoading.value = false;
  detailListInfoRef.value.initData(res.ffuList);
};

const submitHandler = async () => {
  await nextTick();
  await typeIdChangeHandler(typeId_.value);
};

const showHistory = () => {
  isShowHistory.value = true;
};
const hideHistory = () => {
  isShowHistory.value = false;
};

// 切换设备
const handleChangeCurrent = (item: any) => {
  fetchList("");
};

// 获取库存数据
const initStorageData = (values: any) => {
  if (values.length) {
    values.map(item => {
      storageData.value[item.type] = item.data.filterStorageByType;
    });
  }
};

onMounted(async () => {
  const res = await fetchData("MAU");
  fetchList("");
});
</script>

<template>
  <div class="common_list_container">
    <!-- <div class="lifecycle-item consumableItems-content">
      <tabItem ref="tabItemRef" type="MAU" @selectChanged="handleChangeCurrent" />
    </div> -->
    <!-- <div class="lifecycle-item detailInfo-content">
      <tabItemDetail ref="detailInfoRef" :loading="detailInfoLoading" />
    </div> -->
    <tableList ref="detailListInfoRef" :storageData="storageData" :loading="detailInfoLoading" @submit="submitHandler" />
  </div>
</template>

<style lang="scss" scoped>
.common_list_container {
  padding: 16px;
  background-color: #fff;
  border-radius: 4px;

  .common_page {
    height: 33px;
    padding: 0 !important;
    margin-top: 25px;
    margin-bottom: 0;
  }
}

:deep(.px-table .px-table__header-wrapper th, .px-table .px-table__fixed-header-wrapper th) {
  font-size: 14px !important;
}
</style>
